<template>
  <view>
    <view class="title"> 急速洗车中 </view>
    <view class="time"> 预计用时3分35秒 </view>
    <view class="img"></view>
    <view class="progress">
      <!-- <u-line-progress
        :striped="true"
        :percent="percent"
        :striped-active="true"
        active-color="#61C5FF"
        :show-percent="true"
      >
      </u-line-progress> -->
      <view class="line-progress">
        <view class="line-progress-active" :style="[progressStyle]"></view>
        <view class="dot" :style="[dotStyle]">
          <view class="text">{{ percent }}%</view>
        </view>
      </view>
    </view>

    <view class="state-text">清水冲洗中…</view>
    <view @click="finished">结束入口</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      percent: 0,
      timer: null,
      timer2: null,
      dotStyle: {},
      progressStyle: {},
    };
  },
  onLoad() {
    // 接口获取动画所需分钟数
    this.dotStyle = {
      left: this.percent + "%",
      transition: "all 10s ease",
    };
    this.progressStyle = {
      width: this.percent + "%",
      transition: "width 10s ease",
    };
    this.timer = setTimeout(() => {
      this.dotStyle.left = "99%";
      this.progressStyle.width = "99%";
    }, 1000);
    this.timer2 = setInterval(() => {
      if (this.percent < 100) {
        this.percent += 1;
      } else {
        clearInterval(this.timer2);
        this.timer2 = null;
      }
    }, 100);
  },

  methods: {
    finished() {
      uni.navigateTo({
        url: "/pages_commodity/selfWash/autoWashFinish/autoWashFinish",
      });
    },
  },

  BeforeDestory() {
    clearTimeout(this.timer);
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
};
</script>
<style lang="scss" scoped>
.title {
  text-align: center;
  font-size: 60rpx;
  font-weight: bold;
  color: #333333;
}
.time {
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  padding: 30rpx 0 107rpx;
}
.img {
  text-align: center;
  width: 670rpx;
  height: 60rpx;
}
.progress {
  margin: 40rpx 75rpx;
  // position: relative;

  .line-progress {
    width: 100%;
    height: 32rpx;
    border-radius: 16rpx;
    background-color: #61c5ff;
    position: relative;

    .line-progress-active {
      // width: 300rpx;
      border-radius: 16rpx;
      border: 4rpx solid #61c5ff;
      height: 32rpx;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #61c5ff;
      background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 75%,
        transparent 75%,
        transparent
      );
      background-size: 30rpx 30rpx;
      animation: progress-stripes 2s linear infinite;
    }
  }
}
.dot {
  position: absolute;
  // right: 0;
  top: -16rpx;
  width: 64rpx;
  height: 64rpx;
  line-height: 64rpx;
  // text-align: center;
  background: #ffffff;
  border: 4rpx solid #61c5ff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
  border-radius: 50%;
  font-size: 20rpx;
  font-weight: 500;
  color: #2e91d6;
  margin-left: -29rpx;
  // transition: all 0.4s ease;

  .text {
    transform: scale(0.8);
  }
}

.state-text {
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #2e91d6;
}
@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30rpx 0;
  }
}
</style>
